/**
 * useDetail 详情页面 hook
 * @Author: linzy
 * @Date: 2022-11-22
 * @function useHeader
 * @param {detailItem[]} detailItems - 详情树结构数组
  * @property {object} detailItem - 详情对象 { label: '', name: '', type: '', span: '', render }
  * @property {string} title - 标题
  * @property {boolean} show - 是否显示 默认为true
  * @property {string} name - 详情对象detail中的模块对象名
  * @property {string} children - 子列表
  * @property {string} label - 属性名
  * @property {string} name - 属性值
  * @property {string} defaultValue - 缺省值 当值为null或者undefined的时候显示
  * @property {string} type - 显示类型 money image date 同表格的columns中的type
  * @property {string} span - 占几列 可传2 就是占两列
  * @property {function} render - 自定义render(text,record){} 返回ReactDOM
 * @param {object} detail - 详情数据
 * @param {object} descriptionsProps -AntD组件 Descriptions 组件传参对象 默认为 {
 * bordered: true,
 * size: 'small',
 * column: 2
 * }
 * @param {object} descriptionsItemProps - AntD组件 Descriptions.Item 组件传参对象
 * @returns {ReactDOM}
 * @example
 * import { useDetail } from '@/hooks'
  const detailItems = [
    {
      title: '基础信息', children: [
        { label: 'ID', name: 'uid', type: 'copy' },
        { label: '注册时间', name: 'xxx', type: 'datetime' },
        {
          label: '性别', name: 'gender', type: 'status', enum: {
            0: '女',
            1: '男',
          }
        },
        { label: '头像', name: 'avatar', type: 'image' },
        { label: '图片墙', name: 'image', type: 'pics' },
        {
          label: '守艺值', name: 'xxx', type: 'link', onClick(text, record) {
            props.history.push('xxx' + detail.uid)
          }
        },
        { label: '近3年非锁粉店铺净付款金额', name: 'xxx', type: 'money' },
      ],
    },
  ]
  const Detail = useDetail({
    detail, detailItems
  })
<Detail />
 */

import { Descriptions } from "antd";
import { setDefaultAttrs, getBoolean } from "@/hooks/tools";
import _ from "lodash";
import { useRenders } from "@/hooks";
import styles from "./style.less";

export default function (props) {
  const renders = useRenders();
  const {
    detailItems = [],
    detail = {},
    descriptionsProps = {},
    descriptionsItemProps = {}
  } = props;
  setDefaultAttrs(descriptionsProps, {
    bordered: true,
    size: "small",
    column: 2,
    className: styles.use_detail
  });
  // 赋值value
  const newDetailItems = _.chain(detailItems)
    .cloneDeep()
    .filter(item => getBoolean(item.show, item))
    .each(pItem => {
      let spanNum = 0;
      pItem.children = pItem.children.filter(item =>
        getBoolean(item.show, item)
      );
      pItem.children.forEach((item, index) => {
        item.span && spanNum++;
        const { type, name } = item;
        let value = pItem.name ? detail[pItem.name]?.[name] : detail[name];
        item.value = getValue({ type, value, item });
      });
      // 处理尾部增加一项
      const totalNum = pItem.children.length + spanNum;
      if (totalNum % 2 === 1 && descriptionsProps.column === 2) {
        pItem.children.push({ label: " " });
      }
    })
    .value();
  /**
   * 转化value值
   * @ignore
   * @param {string} type - 类型
   * @param {string} value - 值
   * @param {object} item - 详情的数item
   * @returns {string} newValue
   */
  function getValue({ type, value, item }) {
    switch (type) {
      case "money":
        return (value / 100).toLocaleString();
      case "date":
      case "datetime":
      case "dateMinute":
      case "copy":
        return renders[type](value);
      case "pics":
      case "images":
        return renders["pics"](item)(value);
      case "preview":
      case "image":
        return renders["preview"](item)(value);
      case "status":
      case "video":
        return renders[type](item)(value);
      case "djType":
        return renders[type](item.djTypeList)(value);
      case "link":
        return renders[type](() => item.onClick(value, item))(value);
      default:
        return value ?? item.defaultValue;
    }
  }

  return () => {
    return (
      <>
        {newDetailItems.map((pItem, pIndex) => {
          return (pItem.name && detail[pItem.name]) || !pItem.name ? (
            <Descriptions
              {...descriptionsProps}
              title={pItem.title}
              key={pIndex}
            >
              {pItem.children.map((item, index) => {
                return (
                  <Descriptions.Item
                    className={item.type === "tag" ? styles.tagColumn : ""}
                    {...descriptionsItemProps}
                    span={item.span}
                    label={item.label}
                    className={item.className}
                  >
                    {item.render
                      ? item.render(item.value, item, index)
                      : item.value}
                  </Descriptions.Item>
                );
              })}
            </Descriptions>
          ) : null;
        })}
      </>
    );
  };
}
